<template>
    <div class="basic-map" ref="wrapRef" :class="getWrapperClass">
        <template v-for="item in Object.keys($slots)" :key="item">
            <slot :name="item" v-bind="{}"></slot>
        </template>
    </div>
</template>
<script lang="ts">
    import { computed, defineComponent, ref, unref, getCurrentInstance  } from 'vue';
    import { basicProps } from './prop';
    import { createBasicMapContext } from './hooks/useBasicMapContext';
    import { BasicProps } from './types/basicMap'

    export default defineComponent({
        name: 'BasicMap',
        props: {
            mapKey: {
                type: String,
                default: '371e1dd32fe4cf91fdf7df3d157ca761',
                required: true
            },
            mapPlugin: {
                type: Array,
                default: () =>  ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch', 'AMap.Driving', 'AMap.Geocoder']
            },
            defaultOption: {
                type: Object,
                default: () => ({
                    zoom:8,
                    center:[116.41,39.91],
                    mapStyle: 'light',})
            },
            el: {
                type: String,
                default: 'wrapper'
            },
        },
        emits: ['register'],
        setup(props, { emit, slots, attrs, expose }) {
            // console.log('slots', slots);
            // console.log('attrs', attrs);
            const wrapRef = ref<HTMLDivElement | null>(null);
            const getProps = computed(() => {
                return {
                    ...basicProps,
                    ...props,
                };
            });
            const getBindValues = computed(() => {
                return {
                    ...attrs,
                    ...unref(getProps),
                    //  class: className,
                    //  style,
                    //  center,
                    //  zoom,
                    //  minZoom,
                    //  maxZoom,
                    //  rotation,
                    //  pitch,
                    //  scale,
                    //  offset,
                    //  draggable,
                    //  scrollable,
                    //  doubleClickZoom,
                    //  boundary,
                    //  mapStyleId,
                    //  baseMap,
                    //  viewMode,
                    //  control,
                    // events,
                };
            });
            const getWrapperClass = computed(() => {
                // const values = unref(getBindValues);
                return [
                    // prefixCls,
                    attrs.class,
                ];
            });


            function initMap() {
                console.log('initMap');
            }
            const mapMethods = {
                initMap,
                emit,
            };
            createBasicMapContext({ ...mapMethods, wrapRef, getBindValues });
            const instance = getCurrentInstance();
            instance &&  emit('register',instance, instance.uid);
            return {
                wrapRef,
                getWrapperClass,
                initMap,
            };
        },
    });
</script>
<style lang="less" scoped>
.basic-map{
    flex: 1;
    display: flex;
    z-index: 0;
}
</style>
